require('normalize.css/normalize.css');
require('styles/App.css');

import styles from '../styles/Parent.css';
import React, {Component} from 'react';
import {Form,Carousel, Row, Col, Icon, Layout, Menu, Tabs,Button} from 'antd';
const SubMenu = Menu.SubMenu;
let parent = require('../img/parent/head.jpg');
let nav_curr = require('../img/parent/nav_curr.png');
let icon = require('../images/icon.png');
let phone = require('../img/parent/phone.jpg');
let down = require('../img/parent/down.gif');
let flow = require('../img/parent/flow.jpg');
let docdown = require('../img/parent/docdown.gif');
const TabPane = Tabs.TabPane;
const { Content} = Layout;
import FooterMin from './FooterMin'
let In8 = require('../sources/in8/zh_cn');

const address =In8.address; // `福建省福州市鼓楼区温泉街道五四路157号新天地大厦15层03室`;
const msg1= In8.Parent.msg1;//  `游戏组件未成年人家长监护工程”是一项由完美时空、腾讯、盛大游戏、网易、搜狐畅游、巨人网络六家网络游戏企业共同发起并参与实施，由中华人民共和国文化部指导，旨在加强家长对未成年人参与游戏组件的监护，引导未成年人健康、绿色参与游戏组件，和谐家庭关系的社会性公益行动。它提供了一种切实可行的方法，一种家长实施监控的管道，使家长纠正部分未成年子女沉迷游戏组件的行为成为可能`;
const msg2=  In8.Parent.msg2;// `为了更好的引导未成年人健康、绿色参与游戏组件，和谐家庭关系，我们将尽一切努力，坚决杜绝未成年人沉迷游戏组件。当您发现自己的孩子玩游戏组件过于沉迷的时候，请您提供合法的监护人资质证明，提出对账号限制的强度愿望。可对孩子沉迷的游戏组件采取几种限制措施，如限制孩子每天玩游戏组件的时间区间，也可以限制只有周末才可以游戏，或者完全限制。`;
const msg3 = In8.Parent.msg3;// `　如果您发现你的孩子已经沉迷游戏组件游戏，请你及时的联系我们，并按照处理流程来填写资料，我们的客服主管会帮你亲自受理。如果资料不全的我们会进行电话回访，充分的核实信息资料后，我们会按照你的意愿对孩子账号的游戏组件进行限制，请你放心。`;
const msg4 = In8.Parent.msg4;// `　随着网络在青少年中的普及，未成年人接触游戏组件已经成为普遍现象。为保护未成年人健康参与游戏组件，在政府进一步加强行业管理的前提下，家长也应当加强监护引导。`;
const a1= In8.Parent.a1;//  `1、什么是“游戏组件未成年人家长监护工程”？`;
const a2= In8.Parent.a2;//  `2、你们这项服务收费吗？`;
const a3= In8.Parent.a3;//  `3、你们的服务流程是什么样的？`;
const a4= In8.Parent.a4;//  `4、掌心悦动针对未成年人家长监护系统的受理时间是什么时候？`;
const a5= In8.Parent.a5;//  `5、我填写的资料通过什么方式提供给你们？`;
const a6= In8.Parent.a6;//  `6、你们表中有些信息我提供不了，我该怎么办？`;
const a7= In8.Parent.a7;//  `7、为什么还得提交起诉保证书和授权书？`;
const a8= In8.Parent.a8;//  `8、为什么我想限制我孩子的号那么麻烦？`;
const msg_shuoming = In8.Parent.msg_shuoming;// `为了更好的引导未成年人健康、绿色参与游戏组件，和谐家庭关系，我们将尽一切努力，坚决杜绝未成年人沉迷游戏组件。当您发现自己的孩子玩游戏组件过于沉迷的时候，请您提供合法的监护人资质证明、孩子的账号，以及限制游戏组件强度的愿望等信息。可对孩子沉迷的游戏组件采取几种限制措施，如限制孩子每天玩游戏组件的时间区间，也可以限制只有周末才可以游戏，或者完全限制。`;
const msg_shuoming_1 =In8.Parent.msg_shuoming_1;//  `一、申请条件`;
const msg_shuoming_1_1 = In8.Parent.msg_shuoming_1_1;// `1、申请人需为被监护未成年人的法定监护人；`;
const msg_shuoming_1_2 = In8.Parent.msg_shuoming_1_2;// `2、申请人的被监护人年龄小于18周岁。`;
const msg_shuoming_2 = In8.Parent.msg_shuoming_2;// `二、申请需要提交材料：`;
const msg_shuoming_2_1 = In8.Parent.msg_shuoming_2_1;// `1、填写监护人与被监护人双方信息及相关证件复印件；说明限制游戏组件的形式：时间段封禁、学习日封禁、完全封禁； `;
const msg_shuoming_2_2 = In8.Parent.msg_shuoming_2_2;// `2、填写未成年人家长监护申请书、起诉保证书、授权书并手工签字（需下载，填写并打印，签字）；`;
const msg_shuoming_3 = In8.Parent.msg_shuoming_3;// `三、申请方式`;
const msg_shuoming_3_1 = In8.Parent.msg_shuoming_3_1;// `您在申请监护的过程中遇到了任何的疑问，请联系我们。 `;
const msg_shengqing = In8.Parent.msg_shengqing;//  `  如果您发现你的孩子已经沉迷游戏组件游戏，请你及时的联系我们，并按照处理流程来填写资料，我们的客服主管会帮你亲自受理。如果资料不全的我们会进行电话回访，充分的核实信息资料后，我们会按照你的意愿对孩子账号的游戏组件进行限制，详细流程图如下：`;
const msg_xiazai_1 = In8.Parent.msg_xiazai_1;// `一、监护服务申请文档`;
const msg_xiazai_1_1 = In8.Parent.msg_xiazai_1_1;// ` 我们的初衷是让大家分享快乐开心进步。当你发现因我们站内的游戏组件对你的孩子有不好的影响时，你可以下载《监护服务申请文档》，填写后传真给我们，我们核实你的资料信息后，会及时的受理。`;
const msg_xiazai_2= In8.Parent.msg_xiazai_2;// `二、账号疑义申诉文档`;
const msg_xiazai_2_1 = In8.Parent.msg_xiazai_2_1;// ` 如果你已经和你的孩子做好沟通，有意愿解除孩子账号的游戏组件限制，你可以下载《账号疑义申诉文档》，填写后传真给我们，我们核实你的资料信息后，会及时的受理。`;
const q1 = In8.Parent.q1;// `Q1：什么是“游戏组件未成年人家长监护工程”？`;
const q1_a = In8.Parent.q1_a; //`A：“游戏组件未成年人家长监护工程”是一项由完美时空、腾讯、盛大游戏、网易、搜狐畅游、巨人网络六家网络游戏企业共同发起并参与实施，由中华人民共和国文化部指导，旨在加强家长对未成年人参与游戏组件的监护，引导未成年人健康、绿色参与游戏组件，和谐家庭关系的社会性公益行动。它提供了一种切实可行的方法，一种家长实施监控的管道，使家长纠正部分未成年子女沉迷游戏组件的行为成为可能`;
const q2 = In8.Parent.q2;// In8.Parent.msg1;// `Q2：你们这项服务收费吗？`;
const q2_a = In8.Parent.q2_a;// In8.Parent.msg1;// `A：请您放心，这项服务是完全免费的，我们会在对您提交的信息确认无误后，尽快处理。`;
const q3 = In8.Parent.q3;// `Q3：你们的服务流程是什么样的？`;
const q3_a = In8.Parent.q3_a;// `A：请你参照监控服务申请流程来填写相关的资料表单信息，我们核实您提交的资料后会认真处理的；资料信息填写的不完整或者错误的，我们会在两个工作日内电话回访您，请您放心。`;
const q4 = In8.Parent.q4;// `Q4：掌心悦动针对未成年人家长监护系统的受理时间是什么时候？`;
const q4_a = In8.Parent.q4_a;// `A：我们的服务受理时间是：周一至周五，早9：00至下午18：00`;
const q5 = In8.Parent.q5;// `Q5：我填写的资料通过什么方式提供给你们？`;

const q5_a = In8.Parent.q5_a;// `A：您可以通过信件或快递的方式发送给我们。
//公司地址：${address};`

const q6_a = In8.Parent.q6_a;// `A：您可以提供一些辅助信息，如：被监护人登陆账号的IP地址、登录时长、等信息。建议您可以问一下周围熟悉的人或者朋友是否有玩游戏，请他们协助您获取一些信息，或者帮助了解一些信息，这样能够加快处理进程。`;
const q7_a = In8.Parent.q7_a;// `A：起诉保证书的作用是当我们按您的需求，在对所提交信息审核无误后，进行控制的过程中，如有用户提出书面异议，我们可按照监护人提供的联系地址向其发送书面通知，且您保证在我们通知规定的时间内，按照我们的要求对异议人提起诉讼，以确认被申请账号的归属和使用权利。如您在上述期限内不对异议人提起诉讼，我们将认为您同意终止处理其申请，并由我们自主决定是否解除对帐号的限制。授权书的作用是当我们对被监护人账号采取限制措施或其他调查措施后，一旦有第三人对限制的行为提出异议，在得到您的同意并授权后，我们可以将您的真实身份资料和联系方式提供给该第三人，以方便该第三人对提供虚假信息或恶意干扰第三人游戏权利者提起诉讼。由此而引起的一切法律责任均由您来承担。 `;
const q8_a = In8.Parent.q8_a;// `A：如果您孩子账号注册的身份证与您提供的信息一致，我们将按与您协商的结果对申请监控账号立刻进行处理；若您提供的信息与账号信息不一致，为防止可能由于您提供信息错误，而影响账号实际使用者的利益我们需要进行核实，来判断账号使用者与您的关系。通过上述措施，以帮助我们找到正确的账号，保证您能对孩子真实的游戏账号进行有效的监控。`;

const q6 = In8.Parent.q6;// `Q6：你们表中有些信息我提供不了，我该怎么办？`;
const q7 = In8.Parent.q7;// `Q7：为什么还得提交起诉保证书和授权书？`;
const q8 = In8.Parent.q8;// `Q8：为什么我想限制我孩子的号那么麻烦?`;

const tishi_h = In8.Parent.tishi_h;// `文化部网络游戏内容审查专家委员会中国教育学会中小学信息技术教育委
//员会中国青少年网络协会《未成年人健康参与游戏提示》`;

const tishi = In8.Parent.tishi;// `随着网络在青少年中的普及，未成年人接触网络游戏已经成为普遍现象。为保护未成年人健康参与游戏，在政府进一步加强行业管理的前提下，家长也应当加强监护引导。为此，我们为未成年人参与网络游戏提供以下意见：`;
const tishi_1 = In8.Parent.tishi_1;// `一、主动控制游戏时间。游戏只是学习、生活的调剂，要积极参与线下的各类活动，并让父母了解自己在网络游戏中的行为和体验。`;
const tishi_2 = In8.Parent.tishi_2;// `二、不参与可能耗费较多时间的游戏设置。不玩大型角色扮演类游戏，不玩有PK类设置的游戏。在校学生每周玩游戏不超过2小时，每月在游戏中的花费不超过10元。`;
const tishi_3 = In8.Parent.tishi_3;// `三、不要将游戏当作精神寄托。尤其在现实生活中遇到压力和挫折时，应多与家人朋友交流倾诉，不要只依靠游戏来缓解压力。`;
const tishi_4 = In8.Parent.tishi_4;// `四、养成积极健康的游戏心态。克服攀比、炫耀、仇恨和报复等心理，避免形成欺凌弱小、抢劫他人等不良网络行为习惯。`;
const tishi_5 = In8.Parent.tishi_5;// `五、注意保护个人信息。包括个人家庭、朋友身份信息，家庭、学校、单位地址，电话号码等，防范网络陷阱和网络犯罪。`;
const tishi_time = In8.Parent.tishi_time;// `二〇一〇年五月二十八日`;


class AppComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey:'1'
    };
  }

  componentDidMount(){
    document.getElementsByClassName('ant-tabs-nav-scroll')[0].style.fontSize='16px';
  }

  downLoad(info){
    window.location.href='../downLoad/'+info + ".rar";
  }
  changeTabs(info){
    this.setState({
      activeKey:info
    })
  }
  onChange = (activeKey) => {
    console.log("3333333",activeKey)
    this.setState({ activeKey:activeKey });
  }

  render() {
    return (
      <Layout className="layout" style={{minWidth:'1024px'}}>
        <Content style={{padding: '0 25%',backgroundColor:'white'}}>
          <Row type="flex" justify="center">
              <Col span={24}>
                <img src={parent} style={{width:'100%'}} alt=""/>
              </Col>

              <Col span={24} className={styles.tableLine}>
                <Tabs activeKey={this.state.activeKey}
                      onChange={e=>{this.onChange(e)}}
                      type="card" style={{borderBottom:null,marginTop:'0.4%',marginBottom:'1%',marginLeft:'1%',fontSize:'18px'}}
                >
                  <TabPane tab="首页" key="1"  style={{fontSize:'14px'}}>
                    <Row style={{background:'#f6f9fe'}}>
                      <Col span={16} style={{marginTop:'1%',background:'white'}}>
                        <Col  className={styles.blockbg}>
                          <p>
                            <Icon type="caret-right" />
                            <span style={{fontSize:'18px'}}>工程说明</span>
                          </p>
                        </Col>

                        <Col offset={1} style={{margin:'1%'}}>
                          <p style={{ textIndent:'2em',fontSize:'16px'}}>{msg1}</p>
                        </Col>

                          <Col  className={styles.blockbg}  style={{marginTop:'3%'}}>
                            <p>
                              <Icon type="caret-right" />
                              <span style={{fontSize:'18px'}}>家长监护服务说明</span>
                            </p>
                          </Col>

                          <Col offset={1} style={{margin:'1%'}}>
                            <p style={{ textIndent:'2em',fontSize:'16px'}}>{msg2}</p>
                          </Col>

                          <Col  className={styles.blockbg} style={{marginTop:'3%'}} >
                            <p>
                              <Icon type="caret-right" />
                              <span style={{fontSize:'18px'}}>监护服务申请流程</span>
                            </p>
                          </Col>

                          <Col offset={1} style={{margin:'1%'}}>
                            <p style={{ textIndent:'2em',fontSize:'16px'}}>{msg3}</p>
                          </Col>

                          <Col  className={styles.blockbg}  style={{marginTop:'3%'}}>
                            <p>
                              <Icon type="caret-right" />
                              <span style={{fontSize:'18px'}}>健康游戏组件提示</span>
                            </p>
                          </Col>

                          <Col offset={1} style={{margin:'1%'}}>
                            <p style={{ textIndent:'2em',fontSize:'16px'}}>{msg4}</p>
                          </Col>
                      </Col>
                      <Col offset={1} span={7}>
                        <Col>
                          <img src={down}  onClick={()=>{this.changeTabs('4')}} alt=""/>
                        </Col>

                        <Col  className={styles.blockbg} s>
                          <p>
                            <Icon type="phone" />
                            <span style={{fontSize:'18px'}}>联系我们</span>
                            <div style={{padding:'5%',border:'#c1d7e0 1px solid',background:'white'}}>
                              <img src={phone} style={{width:'100%'}}/>
                            </div>
                          </p>
                        </Col>

                        <Col  className={styles.blockbg}  style={{marginTop:'3%'}} >
                          <p>
                            <Icon type="question-circle-o" />
                            <span style={{fontSize:'18px'}}>常见问题解答</span>
                            <div className={styles.questionLine} style={{padding:'5%',border:'#c1d7e0 1px solid',background:'white',fontSize:'16px'}}>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a1}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a2}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a3}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a4}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a5}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a6}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a7}</a></p>
                              <p><a onClick={()=>{this.changeTabs('5')}}> {a8}</a></p>
                            </div>
                          </p>
                        </Col>
                      </Col>
                    </Row>

                  </TabPane>

                  <TabPane tab="监护服务说明" key="2">
                    <Row type="flex" justify="center" style={{background:'#f6f9fe'}}>
                      <Col className={styles.shuoming} span={20} style={{margin:'1% 0',background:'white',padding:'2%'}}>
                          <p>{msg_shuoming}</p>
                          <br/>
                          <br/>
                          <p><h2><b>具体实施细则如下：</b></h2></p>
                          <span> {msg_shuoming_1}</span>
                          <p>{msg_shuoming_1_1}</p>
                          <p>{msg_shuoming_1_2}</p>
                          <span> {msg_shuoming_2}</span>
                          <p>{msg_shuoming_2_1}</p>
                          <p>{msg_shuoming_2_2}</p>
                          <span> {msg_shuoming_3}</span>
                          <p>{msg_shuoming_3_1}</p>

                          <p><a href="">联系在线客服</a></p>
                          <p>{address}</p>
                      </Col>
                    </Row>
                  </TabPane>
                  <TabPane tab="监护服务申请流程" key="3">
                    <Row type="flex" justify="center" style={{background:'#f6f9fe'}}>
                      <Col className={styles.shuoming} span={20} style={{margin:'1% 0',background:'white',padding:'2%'}}>
                        <p>{msg_shengqing}</p>
                        <br/>
                        <br/>
                       <div>
                         <img src={flow} alt=""/>
                       </div>
                      </Col>
                    </Row>
                  </TabPane>
                  <TabPane tab="申请文档下载" key="4">
                    <Row type="flex" justify="center" style={{background:'#f6f9fe'}}>
                      <Col className={styles.shuoming} span={20} style={{margin:'1% 0',background:'white',padding:'2%'}}>
                        <h2>{msg_xiazai_1}</h2>
                        <br/>
                        <p>{msg_xiazai_1_1}</p>
                        <br/>
                        <div style={{textAlign:'center'}} onClick={()=>(this.downLoad('doc1'))} >
                          <img src={docdown} alt=""/>
                        </div>
                        <h2>{msg_xiazai_2}</h2>
                        <p>{msg_xiazai_2_1}</p>

                        <div style={{textAlign:'center'}} onClick={()=>(this.downLoad('doc2'))} >
                          <img src={docdown}  alt=""/>
                        </div>
                      </Col>
                    </Row>
                  </TabPane>
                  <TabPane tab="常见问题解答" key="5">
                    <Row type="flex" justify="center" style={{background:'#f6f9fe'}}>
                      <Col className={styles.shuoming} span={20} style={{margin:'1% 0',background:'white',padding:'2%'}}>
                        <h2><b>{q1}</b></h2>
                        <br/>
                        <p>{q1_a}</p>
                        <br/>
                        <h2><b>{q2}</b></h2>
                        <br/>
                        <p>{q2_a}</p>
                        <br/>

                        <h2><b>{q3}</b></h2>
                        <br/>
                        <p>{q3_a}</p>
                        <br/>

                        <h2><b>{q4}</b></h2>
                        <br/>
                        <p>{q4_a}</p>
                        <br/>

                        <h2><b>{q5}</b></h2>
                        <br/>
                        <p>{q5_a}</p>
                        <br/>

                        <h2><b>{q6}</b></h2>
                        <br/>
                        <p>{q6_a}</p>
                        <br/>

                        <h2><b>{q7}</b></h2>
                        <br/>
                        <p>{q7_a}</p>
                        <br/>

                        <h2><b>{q8}</b></h2>
                        <br/>
                        <p>{q8_a}</p>
                        <br/>

                      </Col>
                    </Row>

                  </TabPane>
                  <TabPane tab="健康游戏组件提示" key="6">
                    <Row type="flex" justify="center" style={{background:'#f6f9fe'}}>
                      <Col className={styles.shuoming} span={20} style={{fontSize:'16px',margin:'1% 0',background:'white',padding:'2%'}}>
                        <h2> <p><b>{tishi_h}</b></p></h2>
                        <br/>
                          <p>{tishi}</p>
                          <p>{tishi_1}</p>
                          <p>{tishi_2}</p>
                          <p>{tishi_3}</p>
                          <p>{tishi_4}</p>
                          <p>{tishi_5}</p>
                        <p style={{float:'right'}}>{tishi_time}</p>
                      </Col>
                    </Row>
                  </TabPane>
                </Tabs>
              </Col>
          </Row>
        </Content>

        <Row style={{marginTop:'1%'}}>
          <FooterMin/>
        </Row>
      </Layout>
    );
  }
}
export default Form.create()(AppComponent);
